<template>
  <div class="weekend">
    <h5>
      {{title.desc}}
    </h5>
    <ul class="like-list">
      <li v-for="item of likeLists" :key="item.id">
        <div class="like-img">
          <img :src="item.imgUrl" alt="">
        </div>
        <div class="like-info">
          <h6 class="like-item-title">
            {{item.title}}
          </h6>
          <div class="like-item-desc">
            {{item.desc}}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: ['weekendRes'],
    name: "HomeWeekend",
    data(){
      return{
        title: {
          desc: "周末去哪儿",
          imgUrl: "http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png"
        },
        likeLists: []
      }
    },
    watch:{
      weekendRes(newVal,oldVal){
        this.likeLists = newVal
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "~assets/styles/mixins.styl"
  h5
    line-height:0.8rem
    text-indent:0.2rem
    font-size 0.28rem
    background #f5f5f5
  h5 img
    width: 0.3rem
    height 0.3rem
    display inline-block
    overflow hidden
    margin-right: 0.05rem

  .like-list li
    overflow hidden
  .like-list .like-img
    width:100%
    height:0;
    overflow: hidden;
    padding-bottom: 37.4375%;
  .like-list .like-img img
    width: 100%
  .like-list .like-info
    padding 0.14rem 0.2rem 0.2rem 0.2rem
  .like-list .like-info .like-item-title
    line-height:0.6rem
    font-size 0.28rem
    padding-right 1.4rem
    ellipsis()
  .like-list .like-info .like-item-desc
    line-height 0.32rem
    height 0.64rem
    font-size:0.24rem
    padding-right 1.4rem
    color: #616161
    ellipsis()
  .like-list .like-info button
    line-height:0.44rem
    background #ff9300
    border-radius 0.06rem
    padding 0 0.2rem
    color:#fff
    margin-top:0.16rem
</style>
